<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello WebSocket--test222</title>

    <!--<script src="js/sockjs-1.1.1.js"></script>-->
    <!--<script src="js/stomp_v1.js"></script>-->
    <!--<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
    <!--<script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>-->
    <!--<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>-->
    <script src="./js/sockjs.js"></script>
    <script src="./js/stomp.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //connect();
            //checkoutUserlist();
        });

        var stompClient = null;
        var socket = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            socket = new SockJS("http://localhost:81/endpointPush", [], {
                transportOptions: {
                    websocket: {
                        session: "MTUxMTQ4MjUyODE7MURCNzhCMUUzMTUyNkY0QzU5QjI0OTMwRjY4QjJEQzE7MQ",
                        entity: 26
                    }
                }
            });
            stompClient = Stomp.over(socket);
            //stompClient = Stomp.client("ws://localhost:8080/springmvc/hello");
            stompClient.connect('guest', 'guest', function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/user/queue/notifications', function(greeting){
                    console.log(greeting);
                    showGreeting(greeting);
                    //greeting.ack();
                });
            }, errorCallback);
        }
        function errorCallback(msg) {
            console.log("errorCallback--------->" + msg)
        }
        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {atytopic:"greetings"}, JSON.stringify({ 'name': name }));
        }


        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
        function clearText() {
            $("#response").html("");
        }


        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        <button id="clear" onclick="clearText();">Clear</button>
    </div>
    <div id="conversationDiv">
        <label>What is your name?</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>